<template>
  <div class="duty-item-container">
    <CustomTable ref="tableRef" type="index" height="965rem" v-model:form="searchForm" :tableHeader="tableHeader" api="/znjszd3/ht/jszrsx/getZrSxList" :params="reqParams" lastColMinWidth="10%">
      <template #tableTop="{ rows }">
        <el-button type="primary" class="add" plain @click="dialogVisible = true">
          <el-icon><Plus /></el-icon>
          新增</el-button
        >
      </template>
      <template #dyjs="{ row }">
        <span v-if="row.list.length == 0" style="color: #67c23a"> 全部监室 </span>
        <span v-else>
          {{ row.list.map((item) => item.jsmc).join() }}
        </span>
      </template>

      <template #lastColumn="{ row }">
        <el-button type="danger" plain @click.stop="del(row)">
          <el-icon><Delete /></el-icon>
          删除</el-button
        >
      </template>
    </CustomTable>
    <CustomDialog title="新增值日事项" width="50%" height="700rem" v-model:dialogVisible="dialogVisible" @confirm="confirm" @handleClose="dutyItemList = []">
      <div class="add-duty">
        <CustomTree ref="jshTreeRef" width="220rem" showCheckbox title="请选择监室(非必选)" api="/znjszd3/comm/getJshsByDwdm" :params="{ type: 'tree' }"></CustomTree>
        <div class="add-duty-right">
          <div class="add-del-btn">
            <el-button type="primary" class="add" plain @click="addDutyItem">
              <el-icon><Plus /></el-icon>
              新增</el-button
            >
          </div>
          <div class="duty-item-box">
            <el-scrollbar>
              <ul class="duty-item">
                <li v-for="(item, index) in dutyItemList" :key="index">
                  <el-input v-model="item.zrsx" placeholder="请输入值日事项" />
                  <el-button type="danger" class="add" size="small" plain @click="delDutyItem(index)"> 删除</el-button>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </CustomDialog>
  </div>
</template>

<script setup name="dutyItem">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount } from 'vue'
import { http } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
const props = defineProps({})
const tableRef = ref()
const jshTreeRef = ref()
const dialogVisible = ref(false)
const searchForm = ref({
  zrsx: ''
  // jsh: ''
})
const reqParams = ref({})
const tableHeader = ref([
  {
    key: 'zrsx',
    label: '值日事项',
    width: '15'
  },
  {
    key: 'dyjs',
    label: '对应监室',
    width: '50'
  },
  {
    key: 'bgr',
    label: '变更人',
    width: '10'
  },
  {
    key: 'bgsj',
    label: '变更时间',
    width: '15'
  }
])
//值日事项
const dutyItemList = ref([])

const selection = ref([])

onMounted(() => {})

const addDutyItem = () => {
  dutyItemList.value.push({
    zrsx: ''
  })
}

const delDutyItem = (index) => {
  dutyItemList.value.splice(index, 1)
}
const del = (row) => {
  console.log(row)
  ElMessageBox.confirm('确定要删除该条数据吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      http(
        '/znjszd3/ht/jszrsx/delZrSx',
        'post',
        {
          id: row.id
        },
        false
      ).then((res) => {
        if (res.status == 200) {
          ElMessage.success(res.message[0])
          tableRef.value.getData()
        }
      })
    })
    .catch(() => {})
}
//保存值班事项
const confirm = () => {
  if (dutyItemList.value.length == 0) return ElMessage.warning('请先增加值日事项')
  const list = dutyItemList.value.filter((item) => item.zrsx.trim())
  if (list.length == 0) return ElMessage.warning('请输入值日事项')

  http(
    '/znjszd3/ht/jszrsx/addJszr',
    'post',
    {
      list: list,
      jsh: jshTreeRef.value.treeRef.getCheckedKeys().join()
    },
    false
  ).then((res) => {
    if (res.status == 200) {
      ElMessage.success(res.message[0])
      tableRef.value.getData()
      dialogVisible.value = false
    }
  })
  dutyItemList.value = []
}
</script>
<style lang="scss" scoped>
.add-duty {
  border: var(--el-border);
  height: 545rem;
  display: flex;
  border-radius: 4px;
  .add-duty-right {
    padding: 0 10px;
    flex: 1;
    border-left: var(--el-border);
    .add-del-btn {
      height: 50px;
      padding: 0 20px;
      line-height: 50px;
    }
    .duty-item-box {
      height: 485px;
      padding: 10px 10px 10px 20px;
      border: var(--el-border);
      border-radius: 4px;
    }
    .el-scrollbar {
      padding-right: 15px;
    }
    .duty-item {
      // height: 485px;
      // overflow: auto;

      // border: 1px solid red;
      li {
        // border-bottom: var(--el-border);
        height: 40px;
        display: flex;
        align-items: center;

        .el-button {
          margin-left: 15px;
        }
      }
    }
  }
}
</style>
